import React from 'react'
import Nav from 'components/nav'

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions} from '../../reducers'
import { actions as UserAction } from '../../reducers/user'

import history from '../../history'

class Personal extends React.Component {
    componentDidMount() {
        this.props.get_me()
    }
    render() {
        const {userInfo} = this.props
        return(
            <React.Fragment>
                <div class="my margin">
                    <div class="head">
                        <div class="photo">
                            <p><img src={userInfo.avatar} /></p>
                            <p>{userInfo.nickname}</p>
                        </div>
                    </div>
                    <div class="container">
                        <div class="mid clearfix">
                            <div class="row">
                                <div class="col-xs-4" onClick={()=>history.push('/score')}>
                                    <div class="p1">{userInfo.rank}</div>
                                    <div class="p2">评分</div>
                                </div>
                                <div class="col-xs-4" onClick={()=>history.push('/project-profit')}>
                                    <div class="p1">{userInfo.income}</div>
                                    <div class="p2">项目收益</div>
                                </div>
                                <div class="col-xs-4" onClick={()=>history.push('/point')}>
                                    <div class="p1">{userInfo.point}</div>
                                    <div class="p2">积分</div>
                                </div>
                            </div>
                        </div>
                        <div class="info-list clearfix">
                            <div class="row">
                                <div class="hr"></div>
                                <div class="role info clearfix" onClick={()=>history.push('/role')}>
                                    <div class="col-xs-2"><span class="iconfont icon-jiaose"></span></div>
                                    <div class="col-xs-8">我的角色</div>
                                    <div class="col-xs-2"><span class="iconfont icon-gengduo"></span></div>
                                </div>
                                <div class="info clearfix" onClick={()=>history.push('/authentication')}>
                                    <div class="col-xs-2"><span class="iconfont icon-approve"></span></div>
                                    <div class="col-xs-8">我的认证</div>
                                    <div class="col-xs-2"><span class="iconfont icon-gengduo"></span></div>
                                </div>
                                <div class="hr"></div>

                                <div class="info clearfix" onClick={()=>history.push('/contacts')}>
                                    <div class="col-xs-2"><span class="iconfont icon-lianxiren"></span></div>
                                    <div class="col-xs-8">我的联系人</div>
                                    <div class="col-xs-2"><span class="iconfont icon-gengduo"></span></div>
                                </div>
                                <div class="info clearfix" onClick={()=>history.push('/my-category')}>
                                    <div class="col-xs-2"><span class="iconfont"></span></div>
                                    <div class="col-xs-8">我的分类</div>
                                    <div class="col-xs-2"><span class="iconfont icon-gengduo"></span></div>
                                </div>
                                <div class="hr"></div>

                                <div class="message info clearfix" onClick={()=>history.push('/notification')}>
                                    <div class="col-xs-2"><span class="iconfont icon-icon--"></span></div>
                                    <div class="col-xs-8">系统消息</div>
                                    <div class="col-xs-2"><span class="iconfont icon-gengduo"></span></div>
                                </div>
                                <div class="info clearfix" onClick={()=>history.push('/contacts/detail/1')}>
                                    <div class="col-xs-2"><span class="iconfont icon-jifen"></span></div>
                                    <div class="col-xs-8">我的秘书</div>
                                    <div class="col-xs-2"><span class="iconfont icon-gengduo"></span></div>
                                </div>
                                <div class="hr"></div>
                                <div class="info clearfix" onClick={()=>history.push('/invite')}>
                                    <div class="col-xs-2"><span class="iconfont icon-invite-disease"></span></div>
                                    <div class="col-xs-8">邀请朋友</div>
                                    <div class="col-xs-2"><span class="iconfont icon-gengduo"></span></div>
                                </div>
                                <div class="hr"></div>
                                <div class="info clearfix">
                                    <div class="col-xs-2"><span class="iconfont icon-in"></span></div>
                                    <div class="col-xs-8">关于生有涯</div>
                                    <div class="col-xs-2"><span class="iconfont icon-gengduo"></span></div>
                                </div>
                             
                                <div class="exit-login">
                                    <button onClick={this.props.logout}>退出登录</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <Nav/>
            </React.Fragment>
        )
    }
}

function mapStateToProps(state) {
    return {
      userInfo: state.user.userInfo,
    }
}
  
function mapDispatchToProps(dispatch) {
    return  {
        get_me: bindActionCreators(UserAction.get_user_info, dispatch),
        logout: bindActionCreators(actions.get_logout, dispatch),
    }
}
  
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Personal)